<script setup lang="ts">
import { type Ref, ref, inject, onMounted, reactive, watch } from 'vue'
import type { Item } from './util'
import { injectionKey } from './util'
import { nextKey } from '@/widgets/util'

const props = defineProps<{
  id: string
  item: Item
}>()

const injected = inject<Ref<string>>(injectionKey, ref(''))

const inner = reactive({
  id: '12312',
  name: '1111',
  item: {
    name: 'inner.item.name-?',
    call() {
      console.log('call item')
    }
  }
})

function changeInjected() {
  injected.value = nextKey()
}

function callItem() {
  props.item.callback()
}

function exposed11() {
  console.log('exposed')
}

defineExpose({
  exposed11
})

watch(
  () => props.item.name,
  (v) => {
    console.log('watch props.item.name', v)
  }
)

function dumpProps() {
  console.log('props', props)
  console.log('props.item', props.item)
  console.log('props.item.name', props.item.name, typeof props.item.name)
  console.log('injected', injected)
  console.log('inner', inner)
  console.log('inner.item', inner.item, typeof inner.item)
  // inner.item.name = 'inner.item.name-' + nextKey()
}

onMounted(() => {
  console.log('inject-child.props', props)
})
</script>
<template>
  <div class="inject-child">
    <button @click="dumpProps">dump props</button>
    <hr />
    <div><span>inner.item.name</span> {{ inner.item.name }}</div>
    <div><span>item.name</span> {{ item.name }}</div>
    <div>
      <button @click="callItem">call item</button>
    </div>
    <hr />
    <div><span>injected</span> {{ injected }}</div>
    <div>
      <button @click="changeInjected">Change Injected</button>
    </div>
  </div>
</template>
<style lang="scss">
.inject-child {
  > div {
    margin-bottom: 0.5em;
  }
  > hr {
    background-color: #999;
  }
}
</style>
